<template>
  <div class="evaluate-container">
    <ul>
      <template v-for="i in 10" :key="i">
        <li>
          <img src="@/static/images/detail/per01.jpg" alt="" />
          <div>
            <p class="userName">馨***呀</p>
            <p class="desc">
              不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分
            </p>
            <div>
              <img src="@/static/images/detail/eva01.jpg" alt="" />
              <img src="@/static/images/detail/eva02.jpg" alt="" />
              <img src="@/static/images/detail/eva03.jpg" alt="" />
              <img src="@/static/images/detail/eva04.jpg" alt="" />
              <img src="@/static/images/detail/eva05.jpg" alt="" />
            </div>
            <p class="detail">
              <span>2021年2月22号08：31</span>
              <span>颜色分类：大中小三件套（不含花）</span>
            </p>
          </div>
        </li>
        <li>
          <img src="@/static/images/detail/per02.jpg" alt="" />
          <div>
            <p class="userName">么***周</p>
            <p class="desc">
              花瓶超级棒，我看图以为是光面的，收货发现是磨砂的，但是感觉超有质感，很喜欢。磨砂上面还有点纹路，不过感觉挺自然的，不影响美观，包装也很好，绝对不会磕坏碰坏，好评！
            </p>
            <p class="detail">
              <span>2021年2月22号16：12</span>
              <span>颜色分类：大中小三件套（不含花）</span>
            </p>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
.evaluate-container {
  width: 100%;

  ul li {
    display: flex;
    padding: 20px 0px;
    border-bottom: 1px dashed #ddd;
    img {
      width: 40px;
      height: 40px;
    }
    div {
      width: 100%;
      margin-left: 10px;
      font-size: 12px;

      .userName {
        font-weight: 700;
        line-height: 24px;
      }

      .desc {
        line-height: 32px;
        color: #262626;
      }

      div {
        img {
          margin: 6px 0px;
          margin-right: 8px;
        }
      }

      .detail {
        color: #b0b0b0;
      }
    }
  }
}
</style>
